<script setup lang="ts">
defineProps<{
    icon: string,
    link?: string,
    hover?: boolean,
}>();
</script>

<template>
    <NuxtLink
        class="p-3 w-full h-12 shadow-inner rounded flex gap-3 items-center overflow-hidden bg-gradient-to-br to-white active:from-theme"
        :class="{ 'hover:from-element/50': hover }" :to="link" active-class="from-theme">
        <svg class="icon shrink-0" :style="{ width: '1.75rem', height: '1.75rem' }" aria-hidden="true">
            <use :xlink:href="`#${icon}`" />
        </svg>
        <slot />
    </NuxtLink>
</template>